<template>
    <div id="inst-info-content">
        <el-tabs type="card" v-model="activePane" closable @tab-remove="removeTab" @tab-click="handleTabClick">
            <el-tab-pane label="认购/申购/赎回" name="1">
                <RiskOrder :detail="cwDetail" :type="type" @reset="reset" />
            </el-tab-pane>
            <el-tab-pane label="基金转换" name="3">
                <FundTransferOrder :renderCount="renderCount" :detail="transDetail" :type="type" @reset="reset" />
            </el-tab-pane>
            <el-tab-pane label="指令管理" name="2">
                <InstructionInfo :renderCount="renderCount" @changeTab="changeTab" @handelOperate="handelOperate" />
            </el-tab-pane>
            <el-tab-pane v-for="item in panes" :key="item.key" :name="item.key">
                <span slot="label"><i class="el-icon-discover"></i>{{ item.title }} </span>
                <InstReportDetail :staticResult="staticResult" :history="history" style="padding: 20px"></InstReportDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RiskOrder from './cw-open-fund-inst/cw-open-fund-order.vue';
import FundTransferOrder from './cw-open-fund-inst/fund-transfer-order.vue';
import InstructionInfo from './cw-open-fund-inst/cw-open-fund-order-info.vue';
import InstReportDetail from './invest-manage/Inst-report-detail.vue';
import Invest from '@/common/dict/invest';
import { numberFormat } from '@/utils/tools';

@Component({
    name: 'cwOpenFundInst',
    components: {
        RiskOrder,
        InstructionInfo,
        InstReportDetail,
        FundTransferOrder,
    },
})
// 上交送固定收益指令
export default class cwOpenFundInst extends Vue {
    // 显示的标签页
    activePane: string = '1';

    // 指令详情
    detail: any = {};
    transDetail: any = {};
    cwDetail: any = {};

    // 指令类型
    // type: string = '6';

    history: boolean = false;
    // 所有tabs标签页
    panes: any[] = [];
    staticResult: any = {};
    renderCount: number = 0;

    changeTab(val: any) {
        // this.activePane = '1';
        // this.detail = val;
        if (val.orderDirection !== 'E') {
            this.activePane = '1';
            this.cwDetail = val;
        } else {
            this.activePane = '3';
            this.transDetail = val;
            console.log(this.detail, 'ppp');
        }
    }

    reset(val: any) {
        // this.detail = val;
        this.cwDetail = val;
        this.transDetail = val;
    }

    handleTabClick() {
        // if (this.activePane == '2') {
        // 刷新指令管理表格数据
        this.renderCount++;
        // }
    }

    handelOperate({ record, history, clickRecord }): void {
        this.history = history;
        let parentRecord = clickRecord;
        let key = String(record.resultId + '-' + record.entryCode);
        for (let i = 0; i < this.panes.length; i++) {
            if (this.panes[i].key === key) {
                this.activePane = key;
                return;
            }
        }
        this.panes.push({ title: key, key: key });
        this.activePane = key;
        this.staticResult = record;
    }

    // 移除tabs
    removeTab(targetKey: string): void {
        let lastIndex;
        this.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        this.panes = this.panes.filter(pane => pane.key !== targetKey);
        if (this.panes.length && this.activePane === targetKey) {
            if (lastIndex >= 0) {
                this.activePane = this.panes[lastIndex].key;
            } else {
                this.activePane = this.panes[0].key;
            }
        }
        if (this.panes.length === 0) {
            this.activePane = '2';
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-time/styles/inst';
/deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(3) .el-icon-close {
    display: none !important;
}
</style>
